<template>
  <div class="student-page">
    <!-- 顶部标题区域 -->
    <div class="page-header mb-6">
      <h2 class="title">学生管理</h2>
      <p class="desc">管理所有学生信息及学习状态</p>
    </div>

    <!-- 搜索与操作区 -->
    <el-card class="search-card mb-6">
      <div class="search-container">
        <el-row :gutter="24">
          <!-- 搜索与筛选 -->
          <el-col :span="24">
            <el-row :gutter="24">
              <el-col :span="10">
                <el-input
                  v-model="searchForm.name"
                  placeholder="搜索学生姓名"
                  prefix-icon="el-icon-search"
                  clearable
                  @keyup.enter.native="handleSearch"
                ></el-input>
              </el-col>
              <el-col :span="3" style="min-width: 160px;">
                <el-input
                  v-model="searchForm.phone"
                  placeholder="搜索电话号码"
                  prefix-icon="el-icon-phone"
                  clearable
                  @keyup.enter.native="handleSearch"
                ></el-input>
              </el-col>
              <el-col :span="3" style="min-width: 160px;">
                <el-select
                  v-model="searchForm.status"
                  placeholder="所有状态"
                  clearable
                >
                  <el-option label="正常" value="1"></el-option>
                  <el-option label="停用" value="0"></el-option>
                </el-select>
              </el-col>
              <el-col :span="4" style="min-width: 200px;">
                <el-button 
                  type="primary" 
                  icon="el-icon-search"
                  @click="handleSearch"
                >
                  搜索
                </el-button>
                <el-button 
                  @click="handleReset"
                >
                  重置
                </el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 学生列表 -->
    <el-card>
      <div class="table-header">
        <el-button 
          type="primary" 
          icon="el-icon-plus"
          @click="openStudentModal()"
          size="medium"
        >
          添加学生
        </el-button>
      </div>
      <el-table
        :data="studentList"
        v-loading="loading"
        border
        stripe
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <!-- 序号列 -->
        <el-table-column
          prop="id"
          label="学生ID"
          width="80"
          align="center"
        ></el-table-column>

        <!-- 姓名列（带头像） -->
        <el-table-column
          label="姓名"
          min-width="120"
        >
          <template slot-scope="scope">
            <div class="user-info">
              <img :src="scope.row.avatar" class="avatar" alt="头像">
              <span class="name">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>

        <!-- 电话列 -->
        <el-table-column
          prop="phone"
          label="电话"
          min-width="120"
        ></el-table-column>

        <!-- 身份证号列 -->
        <el-table-column
          prop="idCard"
          label="身份证号"
          min-width="180"
        ></el-table-column>

        <!-- 状态列 -->
        <el-table-column
          label="状态"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === '1' ? 'success' : 'danger'"
              size="small"
            >
              {{ scope.row.status === '1' ? '正常' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 登录账号列 -->
        <el-table-column
          prop="username"
          label="登录账号"
          min-width="120"
        ></el-table-column>

        <!-- 绑定课程列 -->
        <el-table-column
          label="绑定课程"
          min-width="120"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              class="course-btn"
              @click="openCourseDetail(scope.row)"
            >
              {{ scope.row.courseCount }}门 <i class="el-icon-caret-bottom"></i>
            </el-button>
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column
          label="操作"
          min-width="140"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="openStudentModal(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              :style="{ color: scope.row.status === '1' ? '#F53F3F' : '#00B42A' }"
              @click="handleStatusChange(scope.row)"
            >
              {{ scope.row.status === '1' ? '停用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.page"
          :page-sizes="[10, 20, 50]"
          :page-size="pagination.size"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 新增/编辑学生模态框 -->
    <el-drawer
      :title="modalTitle"
      :visible.sync="studentModalVisible"
      direction="rtl"
      :size="600"
      :close-on-click-modal="false"
    >
      <div style="padding: 20px;">
        <el-form
          ref="studentForm"
          :model="formData"
          :rules="formRules"
          label-width="100px"
          class="modal-form"
        >
          <!-- 头像上传 -->
          <el-form-item label="头像" prop="avatar">
            <div class="avatar-upload-container">
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :on-change="handleAvatarChange"
                :auto-upload="false"
                accept="image/*"
              >
                <img v-if="formData.avatar" :src="formData.avatar" class="uploaded-avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <div class="avatar-tips">
                <p>建议尺寸: 200x200像素</p>
                <p>支持格式: JPG、PNG</p>
                <p>文件大小: 不超过2MB</p>
              </div>
            </div>
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="formData.name" placeholder="请输入学生姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="phone">
                <el-input v-model="formData.phone" placeholder="请输入电话号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="formData.idCard" placeholder="请输入身份证号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-select v-model="formData.status">
                  <el-option label="正常" value="1"></el-option>
                  <el-option label="停用" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登录账号" prop="username">
                <el-input v-model="formData.username" placeholder="请输入登录账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item 
                label="密码" 
                prop="password"
                :rules="formData.id ? passwordRulesEdit : passwordRulesAdd"
              >
                <el-input 
                  v-model="formData.password" 
                  type="password" 
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item 
                label="确认密码" 
                prop="confirmPassword"
              >
                <el-input 
                  v-model="formData.confirmPassword" 
                  type="password" 
                  placeholder="请再次输入密码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input 
                  v-model="formData.remark" 
                  type="textarea" 
                  rows="3" 
                  placeholder="请输入备注信息"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="text-align: right; margin-top: 30px;">
          <el-button @click="studentModalVisible = false">取消</el-button>
          <el-button type="primary" @click="saveStudent">保存</el-button>
        </div>
      </div>
    </el-drawer>

    <!-- 课程详情模态框 -->
    <el-drawer
      title="绑定课程列表"
      :visible.sync="courseModalVisible"
      direction="rtl"
      :size="600"
      :close-on-click-modal="false"
    >
      <div style="padding: 20px;" v-loading="boundCoursesLoading">
        <!-- 选择课程按钮 -->
        <div style="text-align: right; margin-bottom: 20px;">
          <el-button type="primary" @click="openCourseSelection">
            <i class="el-icon-plus"></i> 选择课程
          </el-button>
        </div>
        
        <div v-if="currentCourseList.length">
          <div 
            v-for="(course, index) in currentCourseList"
            :key="index"
            class="course-card"
          >
            <div class="course-content">
              <div class="course-main-info">
                <span class="course-name">{{ course.name }}</span>
                <span class="course-time" v-if="course.start_time">{{ course.start_time | formatDate }}</span>
              </div>
              <div class="course-actions">
                <el-tag
                  :type="
                    course.status === 'completed' ? 'success' :
                    course.status === 'learning' ? 'primary' : 'info'
                  "
                  size="mini"
                >
                  {{ 
                    course.status === 'completed' ? '已完成' :
                    course.status === 'learning' ? '学习中' : '未开始'
                  }}
                </el-tag>
                <el-button
                  v-if="course.status === 'pending'"
                  type="text"
                  icon="el-icon-delete"
                  style="color: #F56C6C; margin-left: 10px;"
                  @click="removeCourse(index)"
                >
                  删除
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="empty-course">暂无绑定课程</div>
      </div>
    </el-drawer>

    <!-- 选择课程弹窗 -->
    <el-dialog
      title="选择课程"
      :visible.sync="courseSelectionVisible"
      width="660px"
      :close-on-click-modal="false"
    >
      <el-table
        ref="courseTable"
        :data="availableCourses"
        v-loading="courseSelectionLoading"
        @selection-change="handleCourseSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="checkSelectable">
        </el-table-column>
        <el-table-column
          prop="name"
          label="课程名称"
          min-width="200">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          min-width="200">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isBound" type="success" size="mini">已绑定</el-tag>
            <el-tag v-else type="info" size="mini">未绑定</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer">
        <el-button @click="courseSelectionVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmCourseSelection">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api'

export default {
  data() {
    // 密码一致性验证
    const validatePassword = (rule, value, callback) => {
      // 如果两个密码都没填，直接通过（编辑模式下允许不修改密码）
      if (!this.formData.password && !this.formData.confirmPassword) {
        callback();
        return;
      }
      
      // 如果填了任意一个，必须保持一致
      if (this.formData.password !== this.formData.confirmPassword) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    };

    return {
      // 搜索表单
      searchForm: {
        name: '',
        phone: '',
        status: ''
      },

      // 学生列表数据
      studentList: [],
      loading: false,

      // 分页配置
      pagination: {
        page: 1,
        size: 10,
        total: 0
      },

      // 模态框状态
      studentModalVisible: false,
      courseModalVisible: false,
      courseSelectionVisible: false,
      courseSelectionLoading: false, // 课程选择加载状态
      boundCoursesLoading: false, // 已绑定课程列表加载状态
      modalTitle: '添加学生',
      currentStudentId: null,

      // 表单数据
      formData: {
        id: '',
        name: '',
        phone: '',
        idCard: '',
        status: '1',
        username: '',
        password: '',
        confirmPassword: '',
        remark: '',
        avatar: '' // 头像地址
      },

      // 当前课程列表
      currentCourseList: [],
      
      // 可选课程列表
      availableCourses: [],
      
      // 选中的课程
      selectedCourses: [],

      // 表单验证规则
      formRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { pattern: /(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入登录账号', trigger: 'blur' },
          { min: 3, max: 20, message: '账号长度在3-20个字符之间', trigger: 'blur' }
        ],
        confirmPassword: [
          { validator: validatePassword, trigger: 'blur' }
        ]
      },

      // 密码验证规则（区分新增/编辑）
      passwordRulesAdd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度至少6位', trigger: 'blur' }
      ],
      passwordRulesEdit: [
        { min: 6, message: '密码长度至少6位', trigger: 'blur' }
      ]
    };
  },
  
  mounted() {
    // 初始化加载学生列表
    this.getStudentList()
  },
  
  methods: {
    // 检查课程是否可选（已绑定的课程不可选）
    checkSelectable(row) {
      return !row.isBound
    },
    
    // 获取学生列表
    async getStudentList() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.page,
          page_size: this.pagination.size
        }
        
        // 只添加有值的搜索参数
        if (this.searchForm.name) {
          params.name = this.searchForm.name
        }
        if (this.searchForm.phone) {
          params.phone = this.searchForm.phone
        }
        if (this.searchForm.status) {
          params.status = this.searchForm.status
        }
        
        const res = await api.student.getStudentList(params)

        if (res && res.code === 200) {
          // 兼容两种返回格式:
          // 格式1: { code:200, data: [...], pagination: {...} }
          // 格式2: { code:200, data: { list: [...], total, page, page_size } }
          const list = Array.isArray(res.data?.list) ? res.data.list : (Array.isArray(res.data) ? res.data : [])

          this.studentList = list.map(item => ({
            id: item.id,
            name: item.name || item.username,
            avatar: item.avatar || 'https://picsum.photos/id/1012/40/40',
            phone: item.phone,
            className: item.class_name || '',
            classId: item.class_id || '',
            idCard: item.id_card || '',
            // 后端用数字表示状态，1=正常,其他=停用
            status: item.status === 1 || item.status === '1' ? '1' : '0',
            username: item.username,
            courseCount: item.course_count || 0
          }))

          // 兼容两种分页格式: pagination对象(顶级) 或 data内嵌
          if (res.pagination) {
            // 格式1: 顶级pagination对象
            this.pagination.total = res.pagination.total || 0
            this.pagination.page = res.pagination.page || this.pagination.page
            this.pagination.size = res.pagination.page_size || this.pagination.size
          } else if (res.data) {
            // 格式2: data内嵌分页信息
            this.pagination.total = res.data.total || 0
            this.pagination.page = res.data.page || this.pagination.page
            this.pagination.size = res.data.page_size || this.pagination.size
          }
        }
      } catch (error) {
      } finally {
        this.loading = false
      }
    },

    // 打开学生模态框（新增/编辑）
    openStudentModal(row) {
      // 重置表单
      this.$refs.studentForm && this.$refs.studentForm.resetFields();
      
      if (row) {
        // 编辑模式
        this.modalTitle = '编辑学生';
        this.formData = {
          id: row.id,
          name: row.name,
          phone: row.phone,
          idCard: row.idCard,
          status: row.status,
          username: row.username,
          password: '',
          confirmPassword: '',
          remark: row.remark || '',
          avatar: row.avatar || '' // 头像
        }
      } else {
        // 新增模式
        this.modalTitle = '添加学生';
        this.formData = {
          id: '',
          name: '',
          phone: '',
          idCard: '',
          status: '1',
          username: '',
          password: '',
          confirmPassword: '',
          remark: '',
          avatar: '' // 头像
        };
      }
      this.studentModalVisible = true;
    },

    // 处理头像上传
    handleAvatarChange(file, fileList) {
      const rawFile = file.raw
      
      // 验证文件类型
      const isImage = rawFile.type.startsWith('image/')
      if (!isImage) {
        this.$message.error('只能上传图片文件!')
        return false
      }
      
      // 验证文件大小
      const isLt2M = rawFile.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!')
        return false
      }
      
      // 将图片转为base64预览
      const reader = new FileReader()
      reader.onload = (e) => {
        this.formData.avatar = e.target.result
      }
      reader.readAsDataURL(rawFile)
    },

    // 打开课程详情
    openCourseDetail(row) {
      this.currentStudentId = row.id
      
      // 先打开对话框
      this.courseModalVisible = true
      
      // 异步调用接口获取学生已绑定的课程列表
      this.loadBoundCourses(row.id)
    },
    
    // 加载学生已绑定的课程列表
    async loadBoundCourses(studentId) {
      try {
        this.boundCoursesLoading = true;
        const res = await api.student.getBoundCourses(studentId)
        if (res.code === 200) {
          this.currentCourseList = res.data || []
        }
      } catch (error) {
        this.$message.error('获取课程列表失败')
      } finally {
        this.boundCoursesLoading = false;
      }
    },

    // 保存学生信息
    saveStudent() {
      this.$refs.studentForm.validate(async valid => {
        if (valid) {
          try {
            const data = {
              username: this.formData.username,
              name: this.formData.name,
              phone: this.formData.phone,
              id_card: this.formData.idCard,
              status: this.formData.status,
              class_id: this.formData.classId,
              remark: this.formData.remark,
              avatar: this.formData.avatar || undefined // 头像(可选)
            }
            
            if (this.formData.id) {
              // 编辑
              data.id = this.formData.id
              // 如果填写了密码，才传递密码
              if (this.formData.password) {
                data.password = this.formData.password
              }
              await api.student.updateStudent(data)
              this.$message.success('编辑学生成功')
            } else {
              // 新增（密码必填）
              data.password = this.formData.password
              await api.student.createStudent(data)
              this.$message.success('新增学生成功')
            }
            
            this.studentModalVisible = false
            this.getStudentList() // 刷新列表
          } catch (error) {
          }
        }
      });
    },

    // 改变学生状态（启用/停用）
    handleStatusChange(row) {
      const action = row.status === '1' ? '停用' : '启用';
      const newStatus = row.status === '1' ? '0' : '1';
      
      this.$confirm(`确定要${action}该学生吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await api.student.updateStudent({
            id: row.id,
            status: newStatus
          })
          this.$message.success(`${action}成功`)
          this.getStudentList() // 刷新列表
        } catch (error) {
        }
      }).catch(() => {});
    },

    // 分页相关方法
    handleSizeChange(size) {
      this.pagination.size = size;
      this.pagination.page = 1;
      this.getStudentList()
    },
    handleCurrentChange(page) {
      this.pagination.page = page;
      this.getStudentList()
    },

    // 搜索功能
    handleSearch() {
      this.pagination.page = 1;
      this.getStudentList()
    },

    // 重置功能
    handleReset() {
      this.searchForm = {
        name: '',
        status: ''
      };
      this.pagination.page = 1;
      this.getStudentList()
    },

    // 打开课程选择弹窗
    openCourseSelection() {
      this.selectedCourses = [];
      
      // 先打开对话框
      this.courseSelectionVisible = true;
      
      // 清除之前的选择
      this.$nextTick(() => {
        this.$refs.courseTable && this.$refs.courseTable.clearSelection();
      });
      
      // 异步加载可选课程列表
      this.loadAvailableCourses();
    },
    
    // 加载可选课程列表
    async loadAvailableCourses() {
      try {
        this.courseSelectionLoading = true;
        const res = await api.student.getAvailableCourses()
        if (res.code === 200) {
          const allCourses = res.data || []
          
          // 获取当前学生已绑定的课程ID列表
          const boundCourseIds = this.currentCourseList.map(course => course.id)
          
          // 标记已绑定的课程
          this.availableCourses = allCourses.map(course => ({
            ...course,
            isBound: boundCourseIds.includes(course.id)
          }))
        }
      } catch (error) {
        this.$message.error('获取课程列表失败')
      } finally {
        this.courseSelectionLoading = false;
      }
    },

    // 处理课程选择变化
    handleCourseSelectionChange(selection) {
      this.selectedCourses = selection;
    },

    // 确认课程选择
    async confirmCourseSelection() {
      if (this.selectedCourses.length === 0) {
        this.$message.warning('请选择至少一门课程');
        return;
      }
      
      try {
        // 批量绑定课程
        const promises = this.selectedCourses.map(course => 
          api.student.bindCourse({
            student_id: this.currentStudentId,
            course_id: course.id
          })
        )
        
        await Promise.all(promises)
        
        this.courseSelectionVisible = false;
        this.$message.success(`成功添加 ${this.selectedCourses.length} 门课程`);
        
        // 刷新课程列表
        await this.refreshBoundCourses()
        
        // 刷新学生列表以更新课程数量
        await this.getStudentList()
      } catch (error) {
      }
    },

    // 刷新学生绑定的课程列表
    async refreshBoundCourses() {
      try {
        const res = await api.student.getBoundCourses(this.currentStudentId)
        if (res.code === 200) {
          this.currentCourseList = res.data || []
        }
      } catch (error) {
      }
    },

    // 移除课程绑定
    removeCourse(index) {
      const course = this.currentCourseList[index]
      
      this.$confirm('确定要解除该课程的绑定吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await api.student.unbindCourse({
            student_id: this.currentStudentId,
            course_id: course.id
          })
          
          this.$message.success('解除绑定成功');
          // 刷新课程列表
          await this.refreshBoundCourses()
          
          // 刷新学生列表以更新课程数量
          await this.getStudentList()
        } catch (error) {
        }
      }).catch(() => {});
    },

    // 搜索
    handleSearch() {
      this.pagination.page = 1 // 搜索时重置到第一页
      this.getStudentList()
    },

    // 重置搜索
    handleReset() {
      this.searchForm = {
        name: '',
        phone: '',
        status: ''
      }
      this.pagination.page = 1
      this.getStudentList()
    }
  }
};
</script>

<style scoped>
/* 页面标题 */
.page-header {
  margin-bottom: 20px;
  text-align: left; /* 强制靠左对齐（核心修改） */
}
.title {
  font-size: 20px;
  font-weight: bold;
  color: #304156;
  margin-bottom: 5px;
  margin-left: 0;
}
.desc {
  color: #86909C;
  font-size: 14px;
  text-align: left;
}

/* 搜索区 */
.search-card {
  padding: 15px 20px;
}
.search-container {
  width: 100%;
}
.text-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

/* 学生列表样式 */
.user-info {
  display: flex;
  align-items: center;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
}
.name {
  font-weight: 500;
}
.course-btn {
  color: #165DFF;
  padding: 0;
}
.course-btn:hover {
  color: #0E42D2;
}

/* 表格头部 */
.table-header {
  margin-bottom: 16px;
  text-align: left;
}

/* 分页容器 */
.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 模态框表单 */
.modal-form {
  margin-top: 10px;
}

/* 头像上传样式 */
.avatar-upload-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  display: block;
}

.uploaded-avatar {
  width: 120px;
  height: 120px;
  display: block;
  object-fit: cover;
}

.avatar-tips {
  flex: 1;
}

.avatar-tips p {
  margin: 0 0 8px 0;
  color: #86909C;
  font-size: 12px;
  line-height: 1.5;
}

.avatar-tips p:last-child {
  margin-bottom: 0;
}

/* 课程详情 */
.course-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.course-name {
  font-weight: 500;
}
.empty-course {
  text-align: center;
  padding: 30px 0;
  color: #86909C;
}

/* 课程卡片样式 */
.course-card {
  border: 1px solid #E5E6EB;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
  background-color: #fff;
}
.course-card:last-child {
  margin-bottom: 0;
}
.course-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.course-main-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.course-name {
  font-weight: 500;
  color: #1D2129;
}
.course-time {
  color: #86909C;
  font-size: 12px;
  background-color: #F7F8FA;
  padding: 2px 8px;
  border-radius: 4px;
}
.course-actions {
  display: flex;
  align-items: center;
}
</style>